<template>
	<view>
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item>
					<view class="swiper-item uni-bg-red">A</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-green">B</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-blue">C</view>
				</swiper-item>
			</swiper>
		<view class="member">
			<view class="layout">
				<view class="member-icon" @click="handleMemberButton()">
					<image src="../../../static/logo.png"></image>
				</view>
				<view class="member-text">
					<view class="member-text-text" @click="handleMemberButton()">万达影迷</view>
					<view class="member-card layout">
						<view class="member-card-item">0张卡</view>
						<view class="member-card-item" @click="handleMemberCouponButton()">0张卷</view>
					</view>
				</view>
				<view class="member-button layout">
					<view class="member-button-item">					
						<view class="member-button-item-icon">
							<image src="../../../static/logo.png"></image>
						</view>
						<view class="member-button-item-text">观影卡</view>
					</view>
					<view class="member-button-item"  @click="handleMemberCouponButton()">					
						<view class="member-button-item-icon">
							<image src="../../../static/logo.png"></image>
						</view>			
						<view class="member-button-item-text">卷礼包</view>
					</view>
				</view>
			</view>
		</view>
		</view>
		<view class="mission">
			<view class="layout">
				<view class="mission-block">
					<view class="mission-block-tooltip">新人专享卷</view>
					<view class="mission-block-icon">
						<image src="../../../static/logo.png"></image>
					</view>
				</view>
				<view class="mission-block">
					<view class="mission-block-tooltip">邀好友享优惠</view>
					<view class="mission-block-icon">
						<image src="../../../static/logo.png"></image>
					</view>
				</view>
				
			</view>
		</view>
		<view class="block">
			<view class="block-header" @click="handleProductListButton()">正在热映</view>
			<view class="block-body layout">
				<view class="block-body-item" v-for="(product,index) in readyProductList" :key="index" @click="handleProductButton(product)">
					<view class="block-body-item-icon">
						<image src="../../../static/logo.png"></image>
					</view>
					<view class="block-body-item-text">{{product.productName}}</view>
					<view class="block-body-item-button">购买</view>
					
				</view>
			</view>
		</view>
		<view class="block">
			<view class="block-header" @click="handleProductListButton()">即将上映</view>
			<view class="block-body layout">
				<view class="block-body-item" v-for="(product,index) in readyProductList" :key="index" @click="handleProductButton(product)">
					<view class="block-body-item-icon">
						<image src="../../../static/logo.png"></image>
					</view>
					<view class="block-body-item-text">{{product.productName}}</view>
					<view class="block-body-item-button">购买</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				hotProductList:[],
				readyProductList:[
					{
						productIcon:"/static/logo.png",
						productName:"菜油2501期",
						productID:1010,
					},
					{
						productIcon:"/static/logo.png",
						productName:"棕榈油2501期",
						productID:1010,
					},
					{
						productIcon:"/static/logo.png",
						productName:"豆油2501期",
						productID:1010,
					},
					{
						productIcon:"/static/logo.png",
						productName:"沪铝2501期",
						productID:1010,
					}
				]
			}
		},
		methods: {
			handleProductButton:function(product){
				uni.redirectTo({
					url:"/pages/fund/detail/detail?fromType=main&productID="+product.productID
				})
			},
			handleMemberButton:function(){
				uni.switchTab({
					url:"/pages/home/home/home"
				})
			},
			handleMemberCouponButton:function(){
				uni.redirectTo({
					url:"/pages/home/coupon/coupon"
				})
			},
			handleProductListButton:function(){
				uni.redirectTo({
					url:"/pages/fund/column/column"
				})
			}
		}
	}
</script>

<style>
page { background: #ededed; }
.uni-margin-wrap { position: relative; }
.uni-margin-wrap {		width: 750rpx; height: 520rpx;: 100%; padding-bottom: 100rpx;}
.swiper {	height: 520rpx;}
.swiper-item {	display: block;	height: 520rpx;	line-height: 300rpx;	text-align: center;}
.swiper-list {	margin-top: 40rpx;	margin-bottom: 0;}

.uni-common-mt {	margin-top: 60rpx;	position: relative;}
.uni-bg-green { background: green; }
.uni-bg-red { background: red; }
.uni-bg-blue { background: blue; }


.member { position: absolute; top: 480rpx; left: 15rpx; right: 15rpx; z-index: 1000; padding: 15rpx; background: #ffffff;}
.member { border-radius: 15rpx;}
.member-icon { width: 100rpx; height: 100rpx; }
.member-icon image { width: 100%; height: 100%; border-radius: 100%; }

.member-text { padding: 0 25rpx; width: 350rpx; font-size: 16px; }

.member-card { padding: 10rpx 0; }
.member-card-item { border-right: #c30 1px solid; padding-right:20rpx; text-align: left; }
.member-card-item:last-child {  padding-left:20rpx; border-right: 0; }

.member-button-item { width: 100rpx;}
.member-button-item-icon { width: 50rpx; height: 50rpx; margin: 0 auto;}
.member-button-item-text { text-align: center; font-size: 12px; padding-top: 10rpx; }


.mission { width: 700rpx; margin: 30rpx auto; margin-bottom: 30rpx; background: #ffffff; border-radius: 20rpx; }
.mission { padding: 10rpx; }
.mission-block { width: 650rpx; margin-right: 25rpx; }
.mission-block-tooltip { padding: 10rpx 0;}
.mission-block-icon { width: 650rpx; height: 100rpx; }

.block { width: 700rpx; margin: 0 auto; margin-bottom: 30rpx;  background: #ffffff; border-radius: 15rpx; }
.block-header { font-size: 18px; padding: 0 15rpx; padding-top: 15rpx; }
.block-body { height: 330rpx; padding: 15rpx; }

.block-body-item { width: 150rpx; margin-right: 25rpx; }
.block-body-item-icon { width: 150rpx; height: 220rpx; }
.block-body-item-text { width: 150rpx; height: 25rpx; line-height: 25rpx; padding: 25rpx 0; font-size: 14px; overflow: hidden; }
.block-body-item-button { width: 150rpx; height: 30rpx; text-align: center; background: #ededed; font-size: 12px; }

</style>
